<script setup lang="ts">
import { computed } from '@vue/reactivity'
import _ from 'lodash'
import { onMounted, ref, watch } from 'vue'
import VueMarkdown from 'vue-markdown-render'


const props =
  withDefaults(
    defineProps<{
      title?: string
      lang?: string
      code?: string
    }>(),
    {
      lang: 'javascript',
      /** EXAMPLE_CODE */
      code:
        `const foo = 'foo'
const bar = 'bar'
console.debug(foo, bar);
`,
    }
  )

const enum Themes {
  allHallowsEve = 'all-hallows-eve',
  blackboard = 'blackboard',
  dreamweaver = 'dreamweaver',
  espressoLibre = 'espresso-libre',
  github = 'github',
  kimbieDark = 'kimbie-dark',
  kimbieLight = 'kimbie-light',
  monokai = 'monokai',
  obsidian = 'obsidian',
  paraisoDark = 'paraiso-dark',
  paraisoLight = 'paraiso-light',
  pastie = 'pastie',
  rainbow = 'rainbow',
  solarizedDark = 'solarized-dark',
  solarizedLight = 'solarized-light',
  sunburst = 'sunburst',
  tomorrowNight = 'tomorrow-night',
  tricolore = 'tricolore',
  twilight = 'twilight',
  zenburnesque = 'zenburnesque'
}


const markdown = computed(() =>
  `${props.title ? '### ' + props.title + ':\n' : ''}${"```" + props.lang + '\n'}${props.code}${"\n```\n"}
`
)

watch(markdown, _.debounce(() => {
  _.delay(() => {
    (window as any).Rainbow.color()
  }, 100)
}, 500, {
  leading: false,
  trailing: true,
}))
const markdownRef = ref<any>(null)
const themeRef = ref<Themes>(Themes.zenburnesque)

switch (themeRef.value) {
  case Themes.allHallowsEve:
    import('rainbow-code/themes/css/all-hallows-eve.css')
    break
  case Themes.blackboard:
    import('rainbow-code/themes/css/blackboard.css')
    break
  case Themes.dreamweaver:
    import('rainbow-code/themes/css/dreamweaver.css')
    break
  case Themes.espressoLibre:
    import('rainbow-code/themes/css/espresso-libre.css')
    break
  case Themes.github:
    import('rainbow-code/themes/css/github.css')
    break
  case Themes.kimbieDark:
    import('rainbow-code/themes/css/kimbie-dark.css')
    break
  case Themes.kimbieLight:
    import('rainbow-code/themes/css/kimbie-light.css')
    break
  case Themes.obsidian:
    import('rainbow-code/themes/css/obsidian.css')
    break
  case Themes.paraisoDark:
    import('rainbow-code/themes/css/paraiso-dark.css')
    break
  case Themes.paraisoLight:
    import('rainbow-code/themes/css/paraiso-light.css')
    break
  case Themes.pastie:
    import('rainbow-code/themes/css/pastie.css')
    break
  case Themes.rainbow:
    import('rainbow-code/themes/css/rainbow.css')
    break
  case Themes.solarizedDark:
    import('rainbow-code/themes/css/solarized-dark.css')
    break
  case Themes.solarizedLight:
    import('rainbow-code/themes/css/solarized-light.css')
    break
  case Themes.sunburst:
    import('rainbow-code/themes/css/sunburst.css')
    break
  case Themes.tomorrowNight:
    import('rainbow-code/themes/css/tomorrow-night.css')
    break
  case Themes.tricolore:
    import('rainbow-code/themes/css/tricolore.css')
    break
  case Themes.twilight:
    import('rainbow-code/themes/css/twilight.css')
    break
  case Themes.zenburnesque:
    import('rainbow-code/themes/css/zenburnesque.css')
    break
  default:
  case Themes.monokai:
    import('rainbow-code/themes/css/monokai.css')
    break
}

onMounted(() => {
  (window as any).Rainbow.color()
})
</script>

<template>
  <vue-markdown class="desc-wrapper" ref="markdownRef" :source="markdown" />
</template>

<style lang="less">
.desc-wrapper>.rainbow-show {
  width: 100%;
}
</style>
